<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付失败 - 您的订单未完成</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .error-card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        .error-card:hover {
            transform: translateY(-5px);
        }
        .error-header {
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            color: white;
            padding: 30px 20px;
            text-align: center;
        }
        .error-icon {
            font-size: 5rem;
            margin-bottom: 20px;
            animation: pulse 1.5s infinite;
        }
        .error-details {
            padding: 30px;
            background-color: white;
        }
        .error-info {
            background-color: #fff8f8;
            border-left: 4px solid #ff6b6b;
            padding: 15px;
            border-radius: 0 8px 8px 0;
            margin: 20px 0;
        }
        .troubleshoot-list li {
            margin-bottom: 12px;
            position: relative;
            padding-left: 30px;
        }
        .troubleshoot-list li:before {
            content: "•";
            color: #ff6b6b;
            font-size: 24px;
            position: absolute;
            left: 0;
            top: -4px;
        }
        .btn-retry {
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            border: none;
            padding: 10px 25px;
            font-weight: 600;
            transition: all 0.3s;
        }
        .btn-retry:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
        }
        .support-card {
            background-color: #f0f8ff;
            border-left: 4px solid #4dabf7;
        }
        .support-card h5 i {
            color: #4dabf7;
        }
        .alipay-info {
            background-color: #e6f7ff;
            border: 1px dashed #4dabf7;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        .error-code {
            font-family: monospace;
            background-color: #2d2d2d;
            color: #f8f9fa;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="error-card">
                <div class="error-header">
                    <i class="bi bi-x-circle-fill error-icon"></i>
                    <h1 class="mb-3">支付未完成</h1>
                    <p class="lead mb-0">很抱歉，您的订单支付过程中出现问题</p>
                </div>

                <div class="error-details">
                    <div class="text-center mb-4">
                        <h3 class="text-danger" th:text="${error} ?: '支付过程中发生错误'"></h3>
                    </div>

                    <div class="error-info">
                        <p th:if="${order}">
                            <strong>订单号：</strong>
                            <span class="error-code" th:text="${order.orderNo}"></span>
                        </p>
                        <p th:if="${alipayParams}">
                            <strong>支付宝交易号：</strong>
                            <span class="error-code" th:text="${alipayParams['trade_no']} ?: '无'"></span>
                        </p>
                        <p th:if="${alipayParams}">
                            <strong>错误状态：</strong>
                            <span class="error-code" th:text="${alipayParams['trade_status']} ?: '未知状态'"></span>
                        </p>
                        <p th:if="${alipayParams}">
                            <strong>错误代码：</strong>
                            <span class="error-code" th:text="${alipayParams['sub_code']} ?: '无'"></span>
                        </p>
                    </div>

                    <div class="mb-4">
                        <h4><i class="bi bi-tools me-2"></i>可能的原因及解决方法：</h4>
                        <ul class="troubleshoot-list">
                            <li>支付过程中网络连接不稳定，请尝试重新支付</li>
                            <li>银行卡余额不足或信用卡额度已满</li>
                            <li>支付超时（支付宝支付需在15分钟内完成）</li>
                            <li>银行系统维护或支付宝系统临时问题</li>
                            <li>订单金额超过您的支付限额</li>
                        </ul>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-4">
                        <a th:href="@{/order/pay?orderId={id}(id=${order.id})}"
                           class="btn btn-lg btn-retry text-white me-md-3">
                            <i class="bi bi-arrow-repeat me-2"></i>重新支付
                        </a>
                        <a th:href="@{/}" class="btn btn-lg btn-outline-secondary">
                            <i class="bi bi-house-door me-2"></i>返回首页
                        </a>
                    </div>

                    <div th:if="${alipayParams}" class="alipay-info mt-5">
                        <h5><i class="bi bi-info-circle me-2"></i>支付宝反馈信息</h5>
                        <p class="mb-1"><strong>错误代码：</strong>
                            <span th:text="${alipayParams['sub_code']} ?: '无'"></span>
                        </p>
                        <p class="mb-1"><strong>错误描述：</strong>
                            <span th:text="${alipayParams['sub_msg']} ?: '无'"></span>
                        </p>
                        <p class="mb-0"><strong>建议操作：</strong>
                            <span th:text="${alipayParams['sub_msg']} ? '请稍后重试或联系客服' : '请检查支付信息后重试'"></span>
                        </p>
                    </div>

                    <div class="support-card p-4 mt-5">
                        <h5><i class="bi bi-headset me-2"></i>需要帮助？</h5>
                        <p>如果您多次尝试后仍然无法完成支付，请联系我们的客服团队：</p>
                        <div class="row mt-3">
                            <div class="col-md-6 mb-3 mb-md-0">
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-telephone fs-4 me-3 text-primary"></i>
                                    <div>
                                        <div>客服热线</div>
                                        <div class="fw-bold">400-123-4567</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex align-items-center">
                                    <i class="bi bi-whatsapp fs-4 me-3 text-success"></i>
                                    <div>
                                        <div>在线客服</div>
                                        <div class="fw-bold">support@yourstore.com</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <a href="#" class="btn btn-outline-primary">
                                <i class="bi bi-chat-dots me-2"></i>联系在线客服
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-4 text-center text-muted">
                <p>© 2023 您的商城名称 保留所有权利</p>
                <p class="small">错误代码: <span th:text="${#dates.format(#dates.createNow(), 'yyyyMMddHHmmss')}"></span>-ERR</p>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>